<template>
  <div id="coupon">
    <van-nav-bar
      title="发朋友圈"
    />
    <div class="container">
      <van-panel>
        <div slot="header" class="panel-header">
          <div class="side">
            <div class="avartar">
              <img src="/static/img/avatar-default.png" alt="">
            </div>
            <div class="user-info">
              <p class="user-name">小编推荐 <span class="label-color">淘宝</span></p>
              <span class="time">09-26 22:00</span>
            </div>
          </div>
          <div class="side">
            <div class="action">
              <span class="btn"><van-icon name="cart" /> 购买</span>
              <span class="btn btn-bg">分享赚：￥9.00</span>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <p class="desc">商品简述商品简述商品简述商品简述商品简述商品简述商品简述商品简述商品简述商品简述商品简述</p>
          <img style="width: 60%" src="/static/img/banner@3x.png" alt="">
          <div class="comment">
            <div class="comment-detail">
              评论详情评论详情评论详情评论详情评论详情评论详情
            </div>
            <div class="copy-btn">
              复制评论
            </div>
          </div>
        </div>
      </van-panel>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'circleComponent',
    data() {
      return {
        active: 0,
        value:'',
      };
    },
  }
</script>

<style scoped lang="less">
  .container {
    padding: .75rem ;
    background-color: #eee;
    min-height: 100%;
    .van-panel {
      border-radius: 1rem;
      padding: .7rem .97rem;
      text-align: left;
      .panel-header {
        display: flex;
        justify-content: space-between;
        p {
          margin: 0;
        }
        .label-color {
          background-image: linear-gradient(90deg,#ff722d 0%,#ff2720 100%);
          color: #fff;
          padding: 0 .4rem;
        }
        .side {
          align-self: center;
        }
        .avartar {
          width: 2.22rem;
          height: 2.22rem;
          display: inline-block;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .user-info {
          display: inline-block;
          .user-name {
            font-size: .88rem;
            color: #000000;
          }
          .time {
            font-size: .75rem;
            color: #8a8a8a;
          }
        }
        .action {
          .btn {
            font-size: .63rem;
            border-radius: 3rem;
            border: 1px solid #e60012;
            padding: .3rem .6rem;
            color: #ed3c2b;
            white-space: nowrap;
            margin-bottom: .2rem;
            display: inline-block;
          }
          .btn-bg {
            color: #fff;
            border-color: transparent;
            background-image: linear-gradient(90deg,#ff722d 0%,#ff2720 100%);
          }
        }
      }
      .panel-body {
        .desc {
          font-size: .94rem;
          line-height: 1.5;
          color: #000;
        }
        .comment {
          display: flex;
          .comment-detail {
            background-color: #eeeeee;
            border-radius: 0.5rem;
            color: #000000;
            font-size: .75rem;
            line-height: 1.5rem;
            padding: .75rem;
            margin-right: .75rem;
          }
          .copy-btn {
            flex-grow: 0;
            align-self: flex-start;
            width: 2.94rem;
            border-radius: .2rem;
            background-color: #000;
            font-size: 0.81rem;
            padding: .75rem .65rem;
            letter-spacing: 0.04rem;
            color: #ffffff;
            text-align: center;
            margin-top: .4rem;
          }
        }
      }
    }
  }
</style>
